import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'

// 引入vite插件
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import ElementPlus from 'unplugin-element-plus/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    // 配置vite插件
    vue(),
    vueDevTools(),
    AutoImport({
      // 自动导入 Vue、vue-router、pinia 相关 API
      imports: [
        "vue",
        // 指定自动导入的API
        {
          "vue-router": [
            "useRouter",
            "useRoute",
          ],
          pinia: ["defineStore", "storeToRefs"],
        },
        '@vueuse/core'
      ],

      // 自动导入 Element Plus 组件库的API
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })],

      // 自动导入目录下的模块
      dirs: [
        // 自动导入 composables 目录下的所有文件
        "./src/composables/**",

        // 自动导入 stores 目录下的所有文件
        "./src/stores/**",

        // 自动导入 utils 目录下的所有文件
        "./src/utils/**",
      ],

      // 是否生成自动导入的类型声明文件
      dts: true,

      // 启用缓存机制，避免在每次重启开发服务器或重新构建时都重新分析所有文件。（只会重新分析变化文件）
      cache: true,

      // 排除不需要进行自动导入识别的文件
      exclude: ["**/node_modules/**", "**/dist/**", "**/build/**"],
    }),
    Components({
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })],

      // 是否生成自动导入的组件类型声明文件
      dts: true
    }),
    // 按需定制主题配置
    ElementPlus({
      useSource: true,
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 自动导入定制化样式文件进行样式覆盖
        additionalData: `
          @use "@/styles/element/index.scss" as *;
          @use "@/styles/var.scss" as *;
        `,
      }
    }
  }
})
